import React, { useState } from 'react';
import {Button, Modal,Switch,Radio,} from 'antd';



function HeadButton(){

    function handleChange(value) {
        console.log(`selected ${value}`);
      }

    //添加弹出框的组件代码
  const [isModalVisible, setIsModalVisible] = useState(false);
//弹出框出现
  const showModal = () => {
    setIsModalVisible(true);
  };
//确定后弹出框消失
  const handleOk = () => {
    setIsModalVisible(false);
  };
//取消弹出框
  const handleCancel = () => {
    setIsModalVisible(false);
  };

  return (
      <div>
    <Button className="btn2" onClick={showModal}>添加</Button>
    <Modal title="新增体检机构" okText="确定" cancelText="取消" width={ 1000 } visible={isModalVisible} onOk={handleOk} onCancel={handleCancel}>
      <div className="modalBox">
        <div className="zuo">
          <div><span>* 机构名称：</span><input/></div>
          <div><span>* 机构ID：</span><input placeholder="系统自动生成" disabled/></div>
          <div><span>* 地址：</span><input/></div>
          <div><span>* 电话：</span><input/></div>
          <div><span>* 机构图片：</span></div>
        </div>
        <div className="you">
          <div><span>* 所在城市：</span>
            <select defaultValue="全部" style={{ width: 90 }} onChange={handleChange}>
              <option value="全部">全部</option>
              <option value="四川省">四川省</option>
              <option value="广东省">广东省</option>
            </select>
            <select defaultValue="全部" style={{ width: 90 }} onChange={handleChange}>
              <option valsue="全部">全部</option>
              <option value="成都市">成都市</option>
              <option value="深圳市">深圳市</option>
            </select></div>
          <div><span>* 机构类型：</span>
              <select defaultValue="全部" style={{ width: 150 }} onChange={handleChange}>
                <option value="全部">全部</option>
                <option value="二甲医院">二甲医院</option>
                <option value="三甲医院">三甲医院</option>
                <option value="专门体检机构">专门体检机构</option>
              </select></div>
          <div><span>* 机构属性：</span><Radio className="radio">免预约</Radio></div>
          <div><span>* 是否启用：</span>
            <Switch className="kaiguan" checkedChildren="开启" unCheckedChildren="关闭" defaultChecked />
          </div>
        </div>
      </div>
    </Modal>
    <Button className="btn2">删除</Button>
    <Button className="btn2">导入</Button>
    </div>
  )
};


export default HeadButton;

